import { defineComponent, onMounted, ref, shallowRef, useTemplateRef } from 'vue'
import Collapse from '@/utils/collapse'
import Record from '@/utils/audio/record'
import TextPhone from '@/assets/images/ai-agent/text-phone.svg'
import ArrowDown from '@/assets/images/ai-agent/arrow-down.svg'

export default defineComponent({
  name: 'textTest',
  setup() {
    let collapse: Collapse
    let record: Record
    const containerRef = useTemplateRef<HTMLElement>('container')
    const isExpanded = shallowRef(false)
    const list = ref([])

    const changeIsExpanded = () => {
      isExpanded.value = !isExpanded.value
      collapse.toggle()
    }

    const start = () => {
      record = new Record()
      record.start()
    }

    const end = () => {
      record.stop()
    }

    const addItem = () => {
      list.value.push({
        title: new Date().getTime(),
      })
      collapse.updateSize()
    }

    const removeItem = () => {
      if (list.value.length) {
        list.value.splice(list.value.length - 1, 1)
        collapse.updateSize()
      }
    }

    onMounted(() => {
      collapse = new Collapse({
        target: containerRef.value,
        isExpanded: isExpanded.value,
        startHeight: 68,
      })
    })

    return () => (
      <>
        <div
          ref="container"
          class={{
            'max-h-68px bg-#F5F7FB border-rd-12px m-b-16px overflow-hidden': true,
          }}
        >
          <div
            class="h-68px p-l-20px p-r-16px cursor-pointer flex flex-items-center flex-justify-between"
            onClick={changeIsExpanded}
          >
            <a-flex gap={15} align="center">
              <img class="w-24px h-24px" src={TextPhone} alt="" />
              <p class="font-size-16px fw-600 color-#242934">文本测试</p>
            </a-flex>
            <img class="w-24px h-24px" src={ArrowDown} alt="" />
          </div>
          <a-button onClick={start}>触发录音</a-button>
          <a-button onClick={end}>关闭录音</a-button>
          <a-button onClick={addItem}>添加item</a-button>
          <a-button onClick={removeItem}>移除item</a-button>
          {list.value.map((i) => (
            <div class="h-50px">{i.title}</div>
          ))}
        </div>
      </>
    )
  },
})
